/** 
  课程审核
*/
<template>
    <div>
        <div v-if="ifShow === 'list'">
            <condition-card @reset="reset" @search="onSubmit">
                <el-form label-position="right" label-suffix="：" label-width="100px">
                    <el-row :gutter="24">
                        <!-- 学院 -->
                        <el-col :span="8">
                            <el-form-item label="开课学院">
                                <el-select
                                    v-model.trim="queryForm.condition.college"
                                    clearable
                                    filterable
                                    style="width:100%"
                                >
                                    <el-option
                                        v-for="item in options.faculty"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <!-- 版本号 -->
                        <el-col :span="8">
                            <el-form-item label="审批状态">
                                <el-select
                                    v-model.trim="queryForm.condition.approvalStatus"
                                    clearable
                                    filterable
                                    style="width:100%"
                                >
                                    <el-option
                                        v-for="item in options.states"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <!-- 搜索框结束 -->

                <!-- 列表页开始 -->
            </condition-card>
            <el-card shadow="never" v-loading="loading" body-style="padding: 24px;">
                <h1 class="condition-title">课程审核</h1>
                <div class="sub-title">
                    <div class="float-left">
                        <!-- 搜索框 中/英文名称 -->
                        <el-input
                            v-model.trim="queryForm.condition.title"
                            placeholder="请输入课程名称搜索"
                            style="width:250px"
                            @keyup.enter.native="onSubmit"
                        >
                            <i
                                slot="suffix"
                                class="el-icon-search"
                                style="margin-top:10px;cursor:pointer"
                                @click="onSubmit"
                            ></i>
                        </el-input>
                    </div>
                    <div class="float-right" style="display: flex;">
                        <!-- 批量审核 -->
                        <el-button type="primary" @click="approveCourse()">
                            批量审核通过
                        </el-button>
                    </div>
                    <br />
                </div>

                <edu-table
                    :pagination="false"
                    :order="true"
                    :tooltipEffect="tooltipEffect"
                    stripe
                    :data="dataList"
                    size="mini"
                    @selection-change="handleSelectionChange"
                >
                    <!-- 课程名称 -->
                    <edu-table-column label="课程名称" prop="title"></edu-table-column>
                    <!-- 学院 -->
                    <edu-table-column label="学院" prop="collegeName"></edu-table-column>
                    <!-- 发布状态 -->
                    <edu-table-column label="审核状态" prop="approvalStatus">
                        <template slot-scope="scope">
                            <el-tag
                                v-if="scope.row.approvalStatus !== null"
                                :type="scope.row.approvalStatus | getType"
                            >
                                {{ scope.row.approvalStatus | approvalStatus }}
                            </el-tag>
                        </template>
                    </edu-table-column>

                    <!-- 操作 -->
                    <edu-table-column :label="$t('base.operate')" fit width="200">
                        <template slot-scope="scope">
                            <!-- 发布 -->
                            <el-button
                                type="text"
                                @click="auditCourse(scope.row)"
                                v-show="scope.row.approvalStatus === 1"
                            >
                                审批
                            </el-button>
                            <!-- 查看 -->
                            <el-button type="text" @click="viewCourse(scope.row)">
                                查看
                            </el-button>
                        </template>
                    </edu-table-column>
                </edu-table>
                <el-row type="flex" class="row-bg" justify="end">
                    <el-col>
                        <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="queryForm.pageNum_"
                            :page-sizes="[20, 40, 80, 100]"
                            :page-size="queryForm.pageSize_"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="queryForm.total_"
                            style="float:right;margin-top:10px"
                        ></el-pagination>
                    </el-col>
                </el-row>
            </el-card>
        </div>
        <div v-if="ifShow === 'audit'">
            <audit-Course
                @returnVal="changekey"
                :submitType="submitType"
                :actNo="actNo"
                :Id="id"
            ></audit-Course>
        </div>
    </div>
</template>
<script>
import courseManageApi from 'common/src/api/academicBehaviorNorms/lessonManage/courseManage'
import { queryDic } from 'common/src/api/dictionary'
import baseUrl from 'common/src/api/internationalCommunication/env'
import UTILS from 'common/src/utils/utils'
import auditCourse from './common/auditCourse'
export default {
    components: {
        'audit-Course': auditCourse
    },
    data() {
        return {
            ifShow: 'list',
            actNo: '',
            id: '',
            submitType: '',
            queryForm: {
                pageNum_: 1,
                pageSize_: 20,
                total_: 0,
                condition: {
                    college: '',
                    approvalStatus: '',
                    title: ''
                }
            },
            isTeacher: 0,
            isFacultyStaff: 0,
            isAdministrator: 0,
            dataList: [],
            multipleSelection: {
                ids: []
            },
            options: {
                faculty: [],
                states: [
                    { value: 1, label: '已提交' },
                    { value: 2, label: '通过' },
                    { value: 3, label: '驳回' }
                ]
            }
        }
    },
    computed: {},
    created() {
        // 初始化列表页
        this.getListData()
        this.initOptions()
    },
    filters: {
        approvalStatus(val) {
            switch (val) {
                case 1:
                    return '已提交'
                case 2:
                    return '通过'
                case 3:
                    return '驳回'
                default:
                    return ' '
            }
        },
        getType(val) {
            switch (val) {
                case 1:
                    return 'info'
                case 2:
                    return 'success'
                case 3:
                    return 'warning'
                default:
                    return val
            }
        }
    },
    methods: {
        changekey(val) {
            this.ifShow = val
            this.getListData()
        },
        async initOptions() {
            // 筛选条件字典查询
            let data = {
                lang: this.$store.getters.language || 'cn',
                type: 'allChild',
                keys: [
                    'X_YX' // 学院
                ]
            }
            await queryDic(data).then(res => {
                UTILS.fillSelect(
                    {
                        faculty: 'X_YX' // 学院
                    },
                    res.data,
                    this.options
                )
            })
        },
        auditCourse(row) {
            this.submitType = 'audit'
            this.actNo = row.actNo
            this.id = row.id
            this.ifShow = 'audit'
        },
        viewCourse(row) {
            this.submitType = 'view'
            this.actNo = row.actNo
            this.id = row.id
            this.ifShow = 'audit'
        },
        approveCourse() {
            let flag = true
            if (this.multipleSelection.ids.length === 0) {
                this.$message.error('请勾选数据')
                flag = false
            } else {
                this.multipleSelection.ids.forEach(val => {
                    if (val.approvalStatus !== 1) {
                        this.$message.error('只能审核已提交的数据')
                        flag = false
                    }
                })
            }
            if (flag) {
                courseManageApi.approveAgree(this.multipleSelection.ids).then(res => {
                    if (res.code === 200) {
                        this.$message({
                            message: '审批成功',
                            type: 'success'
                        })
                        this.getListData()
                    }
                })
            }
        },

        deleteMenu(row, delType) {},

        // 重置筛选框
        reset() {
            this.queryForm = {
                pageNum_: 1,
                pageSize_: 20,
                total_: 0,
                condition: {
                    title: '',
                    college: '',
                    approvalStatus: ''
                }
            }
            this.getListData()
        },

        // 查询按钮
        onSubmit() {
            this.queryForm.pageNum_ = 1
            this.queryForm.total_ = 0
            this.queryForm.pageSize_ = 20
            this.getListData()
        },

        // 获取列表
        getListData() {
            let _this = this
            this.dataList = []
            courseManageApi.getApproveList(this.queryForm).then(res => {
                res.data.list.forEach(revList => {
                    _this.dataList.push(revList)
                    _this.queryForm.pageSize_ = res.data.pageSize_
                    _this.queryForm.total_ = res.data.total_
                    _this.queryForm.pageNum_ = res.data.pageNum_
                })
                _this.multipleSelection.ids = []
            })
        },
        handleSelectionChange(val) {
            this.multipleSelection.ids = []
            val.forEach(menu => {
                this.multipleSelection.ids.push({
                    no: menu.actNo,
                    content: '通过',
                    approvalStatus: menu.approvalStatus
                })
            })
        },
        handleSizeChange(val) {
            this.queryForm.pageSize_ = val
            this.getListData()
        },
        handleCurrentChange(val) {
            this.queryForm.pageNum_ = val
            this.getListData()
        }
    }
}
</script>
<style lang="scss" scoped>
</style>
